<template>
    <view class="page">
        <view class="other-login-text">
            <view class="line"></view>
            <view class="text">推荐以下方式登录</view>
            <view class="line"></view>
        </view>
        <view class="other-login">
            <button class="wx-login" @click="wxLogin">微信授权登录</button>
        </view>
        <bind-mobile :show="isBindMobile" :sessionKey="sessionKey" @close="isBindMobile=false"></bind-mobile>
    </view>
</template>

<script>
    import {mapActions,mapMutations} from "vuex";
    import BindMobile from "../../components/bind_mobile";
    export default {
        name: "login",
        data(){
            return {
                sessionKey:"",
                isBindMobile:false//是否显示绑定手机组件
            }
        },
        onLoad(opts){
            //分店的id
            this.branch_shop_id=opts.branch_shop_id?opts.branch_shop_id:"";
            //桌号
            this.table_code=opts.table_code?opts.table_code:"";
        },
        methods:{
            ...mapActions({
                getWeChatOpenId:"user/getWeChatOpenId",//获取微信小程序用户的openid
                saveWeChatUser:"user/saveWeChatUser" //保存用户信息
            }),
            ...mapMutations({
                LOGIN:"user/LOGIN"
            }),
            //微信授权登录
            wxLogin(){
                uni.login({
                    provider: 'weixin',
                    success:async (loginRes)=> {
                        let code=loginRes.code;
                        let openData=await this.getWeChatOpenId({code:code,appid:"wx1526acec03cf3c4e",secret:"4472a86917d1530e807b81e7350cc227"});
                        this.sessionKey=openData.data.session_key;
                        // 获取用户信息
                        uni.getUserInfo({
                            provider: 'weixin',
                            success: async (infoRes)=> {
                                //用户信息
                                let userInfo={"nickname":infoRes.userInfo.nickName,"sex":infoRes.userInfo.gender,"openid":openData.data.openid,"province":infoRes.userInfo.province,"city":infoRes.userInfo.city,"headimgurl":infoRes.userInfo.avatarUrl};
                                //保存用户信息
                                let userInfoRes=await this.saveWeChatUser({branch_shop_id:this.branch_shop_id,table_code:this.table_code,userinfo:JSON.stringify(userInfo)});
                                if(userInfoRes.code==200){//用户信息保存成功
                                    this.LOGIN({uid:userInfoRes.data.uid,token:userInfoRes.data.token,openid:userInfoRes.data.open_id});
                                    if(userInfoRes.data.isbind=='1'){//手机号已绑定
                                        //返回上一页
                                        uni.navigateBack({ delta: 1 })
                                    }else{
                                        //没有绑定手机号，显示绑定手机号的组件
                                        this.isBindMobile=true;
                                    }
                                }else{
                                    uni.showToast({
                                        title:userInfoRes.data,
                                        icon:"none",
                                        duration:2000
                                    })
                                }

                            }
                        });
                    }
                });
            }
        },
        components:{
            BindMobile
        }
    }
</script>

<style scoped>
    .page{width:100%;min-height:100vh;overflow:hidden;background-color:#FFFFFF;}
    .other-login-text{width:100%;height:100rpx;display:flex;justify-content: space-between;align-items: center;}
    .other-login-text .line{width:30%;height:1px;background-color:#CCCCCC;}
    .other-login-text .text{font-size:28rpx;color:#333333}

    .other-login{width:100%;display:flex;justify-content: center;}
    .other-login .wx-login{width:80%;height:80rpx;background-color:#21B319;margin:0 auto;border-radius: 5px;color:#FFFFFF;font-size:32rpx;text-align:center;line-height:80rpx;}
</style>
